import React, { PureComponent } from 'react'
import store from '../store'
import { increAction } from '../store/counter'

export default class About extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      counter: store.getState().counter,
      dataList: store.getState().dataList,
    }
  }
  componentDidMount() {
    this.unSubscribe = store.subscribe(() => {
      this.setState({
        counter: store.getState().counter,
        dataList: store.getState().dataList,
      })
    })
  }
  componentWillUnmount() {
    this.unSubscribe()
  }
  render() {
    return (
      <>
        <h1>about中当前计数{this.state.counter}</h1>
        <button onClick={() => this.aboutCount()}>About + 1</button>
        {this.state.dataList.map(item => {
          return <div key={item}>{item}</div>
        })}
      </>
    )
  }
  aboutCount() {
    store.dispatch(increAction())
  }
}
